﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
<link href="~/lib/layui/css/layui.css" rel="stylesheet" />
@* <script src="~/lib/layui/layui.js"></script> *@
<script src="~/js/js.cookie.js"></script>
<script src="~/js/moment.js"></script>
<script src="~/lib/jquery/dist/jquery.js"></script>
 @* 导出引入文件 *@
    <title>Layui with XLSX</title>
    <!-- 引入Layui的CSS -->
    @* <link rel="stylesheet" href="path/to/layui.css"> *@
    <!-- 引入XLSX库的CDN -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/xlsx/0.17.0/xlsx.full.min.js"></script>


<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>客户列表</title>
    <link href="//unpkg.com/layui@2.9.18/dist/css/layui.css" rel="stylesheet">
</head>
<body>
    <form class="layui-form" action="">
        <div class="layui-form">
            <div class="layui-form-item">
                <div class="layui-input-group">
                    <div class="layui-input-prefix">
                        客户编码
                    </div>
                    <div>
                        <input id="ClientNo" type="text" placeholder="请输入客户编码" class="layui-input">
                    </div>

                    <div class="layui-input-prefix" style="left:50px">
                        客户名称
                    </div>
                    <div style="left:50px">
                        <input id="ClientName" type="text" placeholder="请输入客户名称" class="layui-input">
                    </div>

                    <div class="layui-input-prefix" style="left:100px">
                        客户简称
                    </div>
                    <div style="left:100px">
                        <input id="ClientAName" type="text" placeholder="请输入客户简称" class="layui-input">
                    </div>
                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-group">
                    <div class="layui-input-prefix" style="left:14px">
                        客户英文名称
                    </div>
                    <dic style="left:14px">
                        <input id="ClientEname" type="text" placeholder="请输入客户英文名称" class="layui-input">
                    </dic>

                    <div class="layui-input-prefix" style="left:77px">
                        是否启用
                    </div>
                    <div style="left:77px;width:197px">
                        <select id="IsVaild" lay-filter="testSelect">
                            <option value="-1">是否启用</option>
                            <option value="0">禁用</option>
                            <option value="1">启用</option>
                        </select>
                    </div>

                    <div style="left:150px">
                        <button onclick="ShowSupplier()" id="searchBtn" type="button" class="layui-btn layui-btn-normal">搜索</button>

                    </div>

                </div>
            </div>

            <div class="layui-form-item">
                <div class="layui-input-group">
                    <div>
                        <button type="button" class="layui-btn layui-btn-sm layui-btn-primary layui-border-blue" lay-on="test-page-custom">
                            <i class="layui-icon layui-icon-add-1">新增</i>
                        </button>
                    </div>
                    <button type="button" class="layui-btn demo-class-accept" lay-options="{accept: 'file'}">
                        <i class="layui-icon layui-icon-upload"></i>
                        上传文件
                    </button>
                    <div style="right:-20px">
                        <button type="button" class="layui-btn layui-bg-blue">导出</button>
                    </div>
                    <script type="text/html" id="barDemo"></script >
                    
                </div>
            </div>

            <table style="left:320px" class="layui-table">
                <thead>
                    <tr>
                        <td><input type="checkbox" id="quanxuan" onclick="xuanzhe()" value="" /></td>
                        <td>客户编号</td>
                        <td>客户名称</td>
                        <td>客户简称</td>
                        <td>客户类型</td>
                        <td>客户电话</td>
                        <td>客户联系人</td>
                        <td>客户联系人电话</td>
                        <td>是否启用</td>
                        <td>操作</td>
                    </tr>
                </thead>
                <tbody></tbody>
            </table>
            <div id="demo-laypage-all"></div>
        </div>
    </form>
    <script src="//unpkg.com/layui@2.9.18/dist/layui.js"></script>

    <script>
        var $ = layui.$;
        var layer = layui.layer;
        var util = layui.util;
        var form = layui.form;
        layui.use(function () {
            // 事件 
            util.on('lay-on', {
                'test-page-custom': function () {
                    layer.open({
                        type: 1,
                        area: '100%',
                        resize: false,
                        shadeClose: true,
                        title: '添加客户',
                        content: `
                          <div class="layui-form" lay-filter="filter-test-layer" style="margin: 16px;">
                           <div class="demo-login-container">
                           <div class="layui-form-item">
                           <div class="layui-input-group">
                           <div class="layui-input-prefix" style="left:28px">
                        客户编码
                           </div>

                          <div style="width:400px;left:28px">
                          <input style="width:400px" type="text" name="ClientNo" value="" lay-verify="required" placeholder="请输入客户编码" lay-reqtext="请填写客户编码" autocomplete="off" class="layui-input" lay-affix="clear">
                             </div>
                             </div>
                             </div>
                            <div class="layui-form-item">
                            <div class="layui-input-group">
                            <div class="layui-input-prefix" style="left:28px">
                              客户名称
                            </div>
                           <div style="width:500px;left:28px">
                            <input style="width:500px" type="text" name="ClientName" value="" lay-verify="required" placeholder="请输入客户名称" lay-reqtext="请填写客户名称" autocomplete="off" class="layui-input" lay-affix="clear">
                           </div>
                            </div>
                            </div>

                           <div class="layui-form-item">
                           <div class="layui-input-group">
                          <div class="layui-input-prefix" style="left:28px">
                            客户简称
                            </div>
                            <div style="width:500px;left:28px">
                           <input style="width:500px" type="text" name="ClientAName" value="" lay-verify="required" placeholder="请输入客户简称" lay-reqtext="请填写客户简称" autocomplete="off" class="layui-input" lay-affix="clear">
                          </div>
                          </div>
                          </div>

                           <div class="layui-form-item">
                           <div class="layui-input-group">
                           <div class="layui-input-prefix">
                                               客户英文名称
                            </div>
                             <input style="width:500px" type="text" name="ClientEname" value="" lay-verify="required" placeholder="请输入客户英文名称" lay-reqtext="请填写客户英文名称" autocomplete="off" class="layui-input" lay-affix="clear">
                              </div>
                              </div>
                           <div class="layui-form-item">
                            <div class="layui-input-group">
                            <div class="layui-input-prefix" style="left:28px">
                            客户类型
                            </div>
                            <div style="width:300px;left:30px">
                            <select style="width:300px" name="ClientTypeName" id="ClientTypeId">
                           <option value="0">请选择</option>
                            </select>
                            </div>
                            </div>
                            </div>

                           <div class="layui-form-item">
                           <div class="layui-input-group">
                           <div class="layui-input-prefix" style="left:30px">
                              客户简介
                          </div>
                          <div style="width:500px;left:28px">
                           <textarea style="width:1000px" type="textarea" name="ClientSynopsis" value="" lay-verify="required" placeholder="请输入客户简介" lay-reqtext="请填写客户简介" autocomplete="off" class="layui-input layui-textarea" lay-affix="clear"></textarea>
                           </div>
                           </div>
                           </div>

                           <div class="layui-form-item">
                           <div class="layui-input-group">
                             <div class="layui-input-prefix" style="left:28px">
                                          客户地址
                              </div>
                              <div style="width:500px;left:28px">
                             <textarea style="width:1000px" type="textarea" name="ClientSite" value="" lay-verify="required" placeholder="请输入客户地址" lay-reqtext="请填写客户地址" autocomplete="off" class="layui-input layui-textarea" lay-affix="clear"></textarea>
                                  </div>
                              </div>
                          </div>

                          <div class="layui-form-item">
                              <div class="layui-input-group">
                                  <div class="layui-input-prefix">
                                              客户官网地址
                                  </div>
                                  <div style="width:300px">
                          <input style="width:300px" type="text" name="ClientWebsite" value="" lay-verify="required" placeholder="请输入客户官网地址" lay-reqtext="请填写客户官网地址" autocomplete="off" class="layui-input" lay-affix="clear">
                          </div>
                                   </div>
                                   </div>
                                  <div class="layui-form-item">
                              <div class="layui-input-group">
                          <div class="layui-input-prefix">
                                      客户邮箱地址
                          </div>
                           <div style="width:300px">
                            <input style="width:300px" type="text" name="ClientEmail" value="" lay-verify="required" placeholder="请输入客户邮箱地址" lay-reqtext="请填写客户邮箱地址" autocomplete="off" class="layui-input" lay-affix="clear">
                              </div>
                            </div>
                           </div>
                                    <div class="layui-form-item">
                                          <div class="layui-input-group">
                           <div class="layui-input-prefix" style="left:10px">
                             客户电话
                            </div>
                           <div style="width:300px;left:10px">
                              <input style="width:300px" type="text" name="ClientPhone" value="" lay-verify="required" placeholder="请输入客户电话" lay-reqtext="请填写客户电话" autocomplete="off" class="layui-input" lay-affix="clear">
                            </div>
                             </div>
                           </div>

                                            <div class="layui-form-item">
                                                  <div class="layui-input-group">
                          <div class="layui-input-prefix" style="left:20px">
                           客户LOGO
                            </div>
                             <div style="width:300px;left:20px">
                              <input style="width:300px" type="text" name="ClientLogo" value="" lay-verify="required" placeholder="请输入客户LOGO" lay-reqtext="请填写客户LOGO" autocomplete="off" class="layui-input" lay-affix="clear">
                                  </div>
                              </div>
                          </div>

                          <div class="layui-form-item">
                          <div class="layui-input-group">
                           <div class="layui-input-prefix" style="left:48px">
                             联系人1
                              </div>
                           <div style="width:300px;left:48px">
                              <input style="width:300px" type="text" name="ClientContact1" value="" lay-verify="required" placeholder="请输入联系人1" lay-reqtext="请填写联系人1" autocomplete="off" class="layui-input" lay-affix="clear">
                             </div>

                             <div class="layui-input-prefix" style="left:65px">
                                 联系人1-电话
                             </div>
                             <div style="width:300px;left:65px">
                                         <input style="width:300px" type="text" name="ClientPhone1" value="" lay-verify="required" placeholder="请输入联系人1-电话" lay-reqtext="请填写联系人1-电话" autocomplete="off" class="layui-input" lay-affix="clear">
                            </div>

                            <div class="layui-input-prefix" style="left:61px">
                                联系人1-邮箱
                            </div>
                            <div style="width:300px;left:61px">
                                        <input style="width:300px" type="text" name="ClientEmail1" value="" lay-verify="required" placeholder="请输入联系人1-邮箱" lay-reqtext="请填写联系人1-邮箱" autocomplete="off" class="layui-input" lay-affix="clear">
                                  </div>
                              </div>
                          </div>

                          <div class="layui-form-item">
                              <div class="layui-input-group">
                                  <div class="layui-input-prefix" style="left:48px">
                                      联系人2
                                  </div>
                                  <div style="width:300px;left:48px">
                                              <input style="width:300px" type="text" name="ClientContact2" value="" lay-verify="required" placeholder="请输入联系人2" lay-reqtext="请填写联系人2" autocomplete="off" class="layui-input" lay-affix="clear">
                          </div>

                          <div class="layui-input-prefix" style="left:65px">
                              联系人2-电话
                          </div>
                          <div style="width:300px;left:65px">
                                      <input style="width:300px" type="text" name="ClientPhone2" value="" lay-verify="required" placeholder="请输入联系人2-电话" lay-reqtext="请填写联系人2-电话" autocomplete="off" class="layui-input" lay-affix="clear">
                            </div>

                            <div class="layui-input-prefix" style="left:61px">
                                联系人2-邮箱
                            </div>
                            <div style="width:300px;left:61px">
                                        <input style="width:300px" type="text" name="ClientEmail2" value="" lay-verify="required" placeholder="请输入联系人2-邮箱" lay-reqtext="请填写联系人2-邮箱" autocomplete="off" class="layui-input" lay-affix="clear">
                                  </div>
                              </div>
                          </div>

                          <div class="layui-form-item">
                              <div class="layui-input-group">
                                  <div class="layui-input-prefix">
                                      统一社会信用代码
                                  </div>
                                  <div style="width:285px">
                                              <input style="width:285px" type="text" name="SocialCreditCode" value="" lay-verify="required" placeholder="请输入统一社会信用代码" lay-reqtext="请填写统一社会信用代码" autocomplete="off" class="layui-input" lay-affix="clear">
                             </div>
                                         </div>
                                  </div>
                                          <div class="layui-form-item">
                                      <div class="layui-input-group">
                             <div class="layui-input-prefix" style="left:50px">
                                 是否启用
                             </div>
                             <div style="width:300px;left:50px">
                            <input type="radio" name="IsVaild" value="1" title="启用" lay-filter="demo-radio-filter" checked>
                             <input type="radio" name="SupplierIsNo" value="0" lay-filter="demo-radio-filter" title="禁用">
                          </div>
                           </div>
                           </div>
                          
                          <div class="layui-form-item">
                              <div class="layui-input-group">
                                  <div class="layui-input-prefix" style="left:70px">
                                      备注
                                  </div>
                                  <div style="width:500px;left:70px">
                                <textarea style="width:1000px" type="textarea" name="Remark" value="" lay-verify="required" placeholder="请输入备注" lay-reqtext="请填写备注" autocomplete="off" class="layui-input layui-textarea" lay-affix="clear"></textarea>
                                    </div>
                                </div>
                            </div>

                                     <div class="layui-form-item">
                                  <div class="layui-input-group">
                            <div class="layui-form-item" style="left:200px">
                                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="demo-login">新增</button>
                                <button class="layui-btn layui-btn-primary"  lay-filter="demo-Break">取消</button>
                                  </div>
                              </div>
                              </div>
                          `,
                        success: function () {
                            $(function () {
                                GetClientType();
                            })
                            function GetClientType() {
                                $.ajax({
                                    url: '@ViewBag.FoundationWrite'+ '/api/Jocker/ClientTypeAdd ',
                                    data: JSON.stringify({}),
                                    type: "post",
                                    async: false,
                                    dataType: "json",
                                    contentType: "application/json",
                                    success: res => {
                                        console.log(res.data);
                                        $.each(res.data, function () {
                                            $("#ClientTypeId").append(`<option value="${this.clientTypeId}">${this.clientTypeName}</option>`);
                                        });
                                        form.render('select');//重新渲染下拉框
                                    }
                                })
                            }
                            // 对弹层中的表单进行初始化渲染
                            form.render();
                            // 表单提交事件
                            form.on('submit(demo-login)', function (data) {
                                var field = data.field; // 获取表单字段值
                                //获取name数据
                                let first = {
                                    clientNo: $("[name='ClientNo']").val(),
                                    clientName: $("[name='ClientName']").val(),
                                    clientAName: $("[name='ClientAName']").val(),
                                    clientEname: $("[name='ClientEname']").val(),
                                    clientTypeId: $("[name='ClientTypeName']").val(),
                                    clientSynopsis: $("[name='ClientSynopsis']").val(),
                                    clientSite: $("[name='ClientSite']").val(),
                                    clientWebsite: $("[name='ClientWebsite']").val(),
                                    clientEmail: $("[name='ClientEmail']").val(),
                                    clientPhone: $("[name='ClientPhone']").val(),
                                    clientLogo: $("[name='ClientLogo']").val(),
                                    clientContact1: $("[name='ClientContact1']").val(),
                                    clientPhone1: $("[name='ClientPhone1']").val(),
                                    clientEmail1: $("[name='ClientEmail1']").val(),
                                    clientContact2: $("[name='ClientContact2']").val(),
                                    clientPhone2: $("[name='ClientPhone2']").val(),
                                    clientEmail2: $("[name='ClientEmail2']").val(),
                                    socialCreditCode: $("[name='SocialCreditCode']").val(),
                                    isVaild: $("[name='IsVaild']").val(),
                                    remark: $("[name='Remark']").val(),
                                };
                                // 显示填写结果，仅作演示用
                                layer.alert(JSON.stringify(field), {
                                    title: '当前填写的字段值'
                                });
                                // 此处可执行 Ajax 等操作
                                // …
                                $.ajax({
                                    url: '@ViewBag.FoundationWrite' + '/api/Jocker/ClientManagementAdd',
                                    data: JSON.stringify(first),
                                    type: "post",
                                    async: true,
                                    dataType: "json",
                                    contentType: "application/json",
                                    success: res => {
                                        if (res.code > 0) {
                                              layer.msg('新增成功');
                                            console.log('新增成功');
                                        }
                                        else {
                                              layer.msg('新增失败');
                                            console.log('新增失败');
                                        }
                                    }
                                })
                                return false; // 阻止默认 form 跳转
                            });
                        }
                    }); 
                }
            })
        });

    </script>
    <script>
        function EditSupplier(clientId) {
        localStorage['clientId']=clientId;

            // 事件
            util.on('lay-on', {
                'test-page-customse': function () {
                    layer.open({
                        type: 2,
                        area: ['1200px','600px'],
                        maxmin: true,
                        shadeClose: true,
                        title: '客户修改',
                        content: `/Enterprise/ClientManagementUpdate`,
                    });
                }
            });
       
        }

    </script>
    <script>
        layui.use(function () {
            var upload = layui.upload;
            var layer = layui.layer;
            // 渲染
            upload.render({
                elem: '.demo-class-accept', // 绑定多个元素
                url: '@ViewBag.FoundationWrite' + "/api/Jocker/ImportProduction",  // 此处配置你自己的上传接口即可
                accept: 'file', // 普通文件
                done: function (res) {
                    layer.msg('上传成功');
                    console.log(res);
                }
            });
        });
    </script>
</body>
</html>
<script>
    layui.use(['form', 'laydate', 'util'], function () {
        var form = layui.form;
        var laypage = layui.laypage;
        var layer = layui.layer;
        var $ = layui.$;
        var laydate = layui.laydate;
        var util = layui.util;

        var pageIndex = 1;
        var pageSize = 2;

        $(function () {
            ShowSupplier(pageIndex, pageSize);
        })
        // 获取客户编码
        $('#searchBtn').click(function () {
            var supplier = $('#ClientNo').val();
            ShowSupplier(pageIndex, pageSize)
        });
        // 获取客户名称
        $('#searchBtn').click(function () {
            var supplier1 = $('#ClientName').val();
            ShowSupplier(pageIndex, pageSize)
        });
        //客户简称
        $('#searchBtn').click(function () {
            var supplier2 = $('#ClientAName').val();
            ShowSupplier(pageIndex, pageSize)
        });
        // 英文名称
        $('#searchBtn').click(function () {
            var supplier3 = $('#ClientEname').val();
            ShowSupplier(pageIndex, pageSize)
        });
        //是否启用
        form.on('select(testSelect)', function (data) {
            ShowPermission(data.value); // data.value
        });
        //客户管理列表
        function ShowSupplier(index, size) {
            var clientNo = $("#ClientNo").val() || "";
            var clientName = $("#ClientName").val() || "";
            var clientAName = $("#ClientAName").val() || "";
            var clientEname = $("#ClientEname").val() || "";
            var isVaild = $("#IsVaild").val() || -1;
            $.ajax({
                url: '@ViewBag.FoundationWrite' + '/api/Jocker/ClientManagementList',
                data: JSON.stringify({ clientNo: clientNo, clientName: clientName, clientAName: clientAName, clientEname: clientEname, isVaild: isVaild, pageIndex: index, pageSize: size }),
                type: "post",
                async: false,
                dataType: "json",
                contentType: "application/json",
                success: res => {
                    var tbody = $("tbody");
                    tbody.empty();
                    if (res.data != null) {
                        $.each(res.data, function () {
                            tbody.append(`<tr>
                             <td><input type="checkbox" class="fanxuan" onclick="fan()" /></td>
                             <td>${this.clientNo}</td>
                             <td>${this.clientName}</td>
                             <td>${this.clientAName}</td>
                             <td>${this.clientTypeName}</td>
                             <td>${this.clientPhone}</td>
                             <td>${this.clientContact1}</td>
                             <td>${this.clientPhone1}</td>
                             <td>${this.isVaild === 1 ? '启用' : '禁用'}</td>  
                             <td>
                                     <a  onclick="EditSupplier('${this.clientId}')" class="btn btn-link layui-btn-xs" lay-on="test-page-customse"">编辑</a>
                                 <a  onclick="DeleteSupplier('${this.clientId}')">删除</a>
                             </td>
                             </tr>`);
                        });
                    }
                    form.render(); // 重新渲染下拉框
                    //完整显示
                    laypage.render({
                        elem: 'demo-laypage-all', // 元素 id
                        count: res.totalCount, // 数据总数
                        curr: index,//当前页
                        limit: size,//每页几条
                        limits: [2, 3, 4],
                        layout: ['count', 'prev', 'page', 'next', 'limit', 'refresh', 'skip'], // 功能布局
                        jump: function (obj, first) {
                            if (!first) {
                                ShowSupplier(obj.curr, obj.limit);
                            }
                        }
                    });
                }
            })
        }
         //导出
        function exportTableToExcel() {
            var table = document.querySelector("table.layui-table tbody");
            var ws = XLSX.utils.table_to_sheet(table);
            var wb = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(wb, ws, "Sheet1");
            XLSX.writeFile(wb, "工作中心列表.xlsx");
        }

        document.querySelector(".layui-btn.layui-bg-blue").addEventListener("click", exportTableToExcel);
    });



        function DeleteSupplier(clientId){
        layer.confirm('确定要删除吗？', {
            btn: ['确定', '取消'] //按钮
        }, function () {
                $.ajax({
                url: 'http://localhost:5292/api/Jocker/ClientManagementDelete',
                        data: JSON.stringify({ clientId: clientId }),
                    type: "post",
                async: true,
                dataType: "json",
                contentType: "application/json",
                success: res => {
                    if (res.code > 0) {
                        layer.msg('删除成功');
                       location.reload();
                    }
                    else {
                        layer.msg('删除失败', { icon: 2 });
                    }
                }
            })
        }, function () {
            layer.msg('已取消', {
                time: 20000, //20s后自动关闭
            });
        }); 
    }

    function xuanze() {
        $(".fanxuan").prop("checked", $("#quanxuan").prop("checked"));
    }
    function fan() {
        var a = $(".fanxuan").length;
        var a1 = $(".fanxuan:checked").length;
        if (a == a1) {
            $("#quanxuan").prop("checked", true);
        } else {
            $("#quanxuan").prop("checked", false);
        }
    }
</script>